<template>
  <div class="work-report-root">
    <el-tooltip
      v-if="state.hasToTop"
      content="向前追溯"
      effect="dark"
      placement="top"
    >
      <div class="work-report-top" @click="toTop">
        <el-icon><Top /></el-icon>
      </div>
    </el-tooltip>
    <div class="work-report-title">
      {{ state.reportData.reportCode }}
      <el-tag type="info">报工单</el-tag>
    </div>
    <div class="work-report-content-root">
      <div class="work-report-content">
        <div
          class="work-report-item"
          style="justify-content: flex-start; text-align: center"
        >
          <span style="font-weight: 600; color: #333">
            【{{ state.reportData.invcode }}】{{ state.reportData.invname }}
          </span>
        </div>
        <div class="work-report-item" style="justify-content: flex-start">
          <div class="work-report-label">物料类型:</div>
          <span class="item-span">{{ state.reportData.invtype }}</span>
        </div>
        <div class="work-report-item" style="justify-content: flex-start">
          <div class="work-report-label">物料型号:</div>
          <span class="item-span">{{ state.reportData.invspec }}</span>
        </div>

        <div class="work-report-item-root">
          <div class="work-report-item" style="flex: 2">
            <div class="work-report-label">报工批次:</div>
            <span class="item-span">{{ state.reportData.invbatch }}</span>
          </div>
          <div class="line-space"></div>
          <div class="work-report-item" style="flex: 3">
            <div class="work-report-label">工序:</div>
            <span class="item-span">{{ state.reportData.opName }}</span>
          </div>
        </div>

        <div class="work-report-item-root">
          <div class="work-report-item" style="flex: 2">
            <div class="work-report-label">报工数量:</div>
            <span class="item-span">{{ state.reportData.qualifiedQty }}</span>
          </div>
          <div class="line-space"></div>
          <div class="work-report-item" style="flex: 3">
            <div class="work-report-label">设备:</div>
            <span class="item-span">{{ state.reportData.equipName }}</span>
          </div>
        </div>

        <div class="work-report-item-root">
          <div class="work-report-item" style="flex: 2">
            <div class="work-report-label">报工人员:</div>
            <span class="item-span">{{ state.reportData.reUserName }}</span>
          </div>
          <div class="line-space"></div>
          <div class="work-report-item" style="flex: 3">
            <div class="work-report-label">时间:</div>
            <span class="item-span">{{ state.reportData.reTime }}</span>
          </div>
        </div>
      </div>
    </div>
    <el-tooltip
      v-if="state.hasToBottom"
      content="向后追溯"
      effect="dark"
      placement="top"
    >
      <div class="work-report-top work-report-bottom" @click="toBottom">
        <el-icon><Bottom /></el-icon>
      </div>
    </el-tooltip>
  </div>
</template>
<script setup>
  import { Top, Bottom } from '@element-plus/icons-vue'
  import {
    getProductByReportApi,
    getMaterialByReportApi,
  } from '@/api/mes/trace_back'

  const getNode = inject('getNode')
  const state = reactive({
    node: null,
    reportData: {},
    hasToTop: true,
    hasToBottom: true,
  })

  const toTop = async () => {
    if (!state.hasToBottom) return
    const topData = await getTopData()
    if (
      !topData ||
      !Object.keys(topData) ||
      Object.keys(topData).length === 0
    ) {
      state.hasToTop = false
      state.node.setData({ hasToTop: false })
      return
    }
    state.node && state.node.data && state.node.data.toTop(state.node, topData)
  }

  const getTopData = async () => {
    const res = await getMaterialByReportApi({
      pkReport: state.reportData.pkReport,
    })
    const dataMap = {}
    if (res.data && res.data.length > 0) {
      const materials = [],
        wips = [],
        products = []
      res.data.forEach((item) => {
        switch (item.type) {
          case 0:
          case '0':
            products.push({ ...item })
            break
          case 1:
          case '1':
            wips.push({ ...item })
            break
          case 2:
          case '2':
            materials.push({ ...item })
            break
        }
      })
      dataMap['materials'] = res.data
    }
    return dataMap || {}
  }

  const toBottom = async () => {
    if (!state.hasToBottom) return
    const bottomData = await getBottomData()
    if (
      !bottomData ||
      !Object.keys(bottomData) ||
      Object.keys(bottomData).length === 0
    ) {
      state.hasToBottom = false
      state.node.setData({ hasToBottom: false })
      return
    }
    state.node &&
      state.node.data &&
      state.node.data.toBottom(state.node, bottomData)
  }

  const getBottomData = async () => {
    const res = await getProductByReportApi({
      pkReport: state.reportData.pkReport,
    })
    const dataMap = {}
    if (res.data && res.data.length > 0) {
      dataMap['products'] = res.data
    }
    return dataMap || {}
  }

  onMounted(() => {
    const node = getNode()
    state.node = node
    state.reportData = node.data.reportData
    state.hasToTop = node.data.hasToTop
    state.hasToBottom = node.data.hasToBottom
    state.node.on('change:data', ({ current }) => {
      const { hasToTop, hasToBottom } = current
      state.hasToTop = hasToTop
      state.hasToBottom = hasToBottom
    })
  })
</script>
<style lang="scss" scoped>
  .work-report-root {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 220px;
    background-color: #aae1ac;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    .work-report-top {
      padding: 2px 0;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      cursor: pointer;
      border-bottom: 2px solid #fff;
      &:hover {
        background-color: #b6eeb8;
      }
    }
    .work-report-bottom {
      border-top: 2px solid #fff;
    }

    .work-report-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 100%;
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      cursor: pointer;
      border-left: 2px solid #fff;
      &:hover {
        color: #ffffff;
        background-color: #fbd325;
      }
    }
    .work-report-title {
      padding: 3px 0;
      font-size: 16px;
      font-weight: bold;
      line-height: 26px;
      color: #ffffff;
      text-align: center;
      border-bottom: 1px solid #fff;
    }
    .work-report-content-root {
      display: flex;
      flex: 1;
      flex-direction: row;
    }
    .work-report-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      .work-report-item-root {
        display: flex;
        flex: 1;
        flex-direction: row;
      }
      .work-report-item {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
        .work-report-label {
          width: 80px;
        }
        .item-span {
          margin-left: 4px;
          font-weight: bold;
          color: #333;
        }
      }
      .line-space {
        width: 1px;
        height: 10px;
        margin: auto 0;
        background-color: #333;
      }
    }
  }
</style>
